<template>
  <div class="searchresult">
      <Header :textName='textName'></Header>
      <div class="productlist" v-show="goodList">
        <div class="product" v-for="(good) in goodList" :key="good.id" @click="toDetail(good.id)">
          <img :src="good.list_pic_url" alt="">
          <p>{{good.name}}</p>
          <span>{{good.retail_price}}</span>
        </div>
      </div>
      <div class="kong" v-show="!goodList[0]">
        <img src="@/assets/images/10.jpg" alt="">
        <span>抱歉，没有检索到您需要的商品！</span>
      </div>
  </div>

  
</template>

<script>
import Header from '@/components/Header'
import { mapState } from 'vuex'
export default {
  name: '',
  data() {
    return {
      textName:'小米有品',
    }
  },
  components:{
    Header
  },
  computed:{
    ...mapState('search',['goodsList']),
    goodList(){
      return this.goodsList.goodsList || []
    }
  },
  methods:{
    toDetail(id){
      this.$router.push({
        path:'/detail',
        query:{
          id:id
        }
      })
    }
  }
}
</script>
<style lang='less' scoped>
  .productlist{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 144px;
    .product{
      width: 50%;
      border-bottom: solid 1px rgb(228, 228, 228);
      padding: 36px 0px;
      text-align: center;
      // background-color: aqua;
      img{
        width: 100%;
      }
      > p{
        font-size: 34px;
        margin-bottom: 10px;
        color:rgb(124, 124, 124)
      }
      > span{
        font-size: 34px;
        color:rgb(209, 79, 4)
      }
    }
  }
  .kong{
    width: 100%;
    text-align: center;
    img{
      width: 50%;
      margin-top: 30%;
    }
    span{
      display: block;
      font-size: 40px;
      color: rgb(94, 94, 94);
      margin-top: 30px;
    }
  }
</style>
